import React, { useState } from 'react';
import { Cascader, Form, Input, message, Modal, Radio } from 'antd';
import { http } from 'libs';
import store from './store';
import { DatePickerFormat, Upload } from '@/components'
import division from 'libs/cascaderOptions';

export default function IForm() {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  function handleSubmit() {
    setLoading(true);
    const formData = form.getFieldsValue();
    formData['id'] = store.record.id;
    http.post('/api/company/', formData)
      .then(() => {
        store.set('formVisible', false);
        store.fetchRecords()
        return message.success('操作成功');
      })
      .finally(() => setLoading(false))

  }

  return (
    <Modal
      open
      maskClosable={false}
      title={store.record.id ? '编辑' : '新建'}
      onCancel={store.vSet('formVisible', false)}
      confirmLoading={loading}
      onOk={handleSubmit}>
      <Form form={form} initialValues={store.record} labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
        <Form.Item required name="logo" label="公司Logo">
          <Upload placeholder="请输入" />
        </Form.Item>
        <Form.Item required name="export_logo" label="文档Logo">
          <Upload placeholder="请输入" />
        </Form.Item>
        <Form.Item required name="name" label="公司名称">
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item required name="mark" label="公司标识">
          <Input placeholder="请输入" disabled={store.record.id ? true : false} />
        </Form.Item>
        <Form.Item required name="contact" label="联系人">
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item required name="is_valid" label="账户类型">
          <Radio.Group options={[{ label: "测试账户", value: false }, { label: "正式账户", value: true }]} />
        </Form.Item>
        <Form.Item required name="expired_date" label="过期时间">
          <DatePickerFormat placeholder="请输入" />
        </Form.Item>
        <Form.Item required name="region" label="省市区">
          <Cascader options={division}
                    fieldNames={{ label: 'label', value: 'label' }}
                    placeholder='请选择' />
        </Form.Item>
        <Form.Item required name="address" label="详细地址">
          <Input.TextArea autoSize={{ minRows: 2, maxRows: 5 }} placeholder="请输入" />
        </Form.Item>
      </Form>
    </Modal>
  )
}